<template>
	<div>
		<div class="flex-row justify-between" style="margin-bottom: 12px;">
			<div>
				<el-input v-model="inputCD" placeholder="请输入菜单名称" style="width: 200px;"></el-input>
				 <el-button icon="el-icon-search" circle style="margin-left: 10px;" @click="CX()"></el-button>
			</div>
        <el-button type="success" @click="AddVisible=true">添加</el-button>
		</div>
 <el-table
  v-loading="loading"
    :data="tableData"
    border>
    <el-table-column
      fixed
      prop="CreateTime"
      label="创建日期"
      >
    </el-table-column>
    <el-table-column
      prop="MenuName"
      label="姓名"
     >
    </el-table-column>
    <el-table-column
      prop="MenuUrl"
      label="菜单链接"
     >
    </el-table-column>
    <el-table-column
      prop="MenuIcon"
      label="菜单图标"
      >
    </el-table-column>
    <el-table-column
      prop="PId"
      label="父Id"
      >
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="Update(scope.row.Id)">修改</el-button>
		<el-popconfirm
		  confirm-button-text='确定'
		  cancel-button-text='取消'
		  icon="el-icon-info"
		  icon-color="red"
		  title="确定删除吗？"
		  @confirm="Delete(scope.row.Id)"
		>
		  <el-button type="text" slot="reference" size="small" style="margin-left: 10px;">删除</el-button>
		  </el-popconfirm>
		  
      </template>
    </el-table-column>
  </el-table>
  
  
  <el-dialog title="添加菜单" :visible.sync="AddVisible" :width="dialogWidth">
	<menu-add @CloseAdd="CloseAdd"></menu-add>
  </el-dialog>
  
  <el-dialog title="修改菜单" :visible.sync="UpdateVisible" :width="dialogWidth">
	<menu-upd @CloseUpd="CloseUpd" :id="id" v-if="UpdateVisible"></menu-upd>
  </el-dialog>

<div class="block">
      <el-pagination

        @current-change="handleCurrentChange"
        :current-page="query.PageIndex"
        :page-size="query.PageSize"
        layout="total, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>
  
   
</template>

<script>
	import menuapi from '@/api/MenuApi.js'
	 import menuAdd from './MenuAdd.vue'
	 import menuUpd from './MenuUpdate.vue'
	  export default {
	    methods: {
	      handleClick(row) {

	      }
	    },
	
	    data() {
	      return {
			  id:0,
	        tableData: [{
	       }],
		   query:{
			   PageIndex:1,PageSize:5
		   },
		   total:0,
		   loading:true,
		   AddVisible:false,
		   UpdateVisible:false,
		   inputCD:"",
		   dialogWidth:'500px',
		   }
	    },
		components:{
			menuAdd,
			menuUpd
			
		},
		created(){
			this.getdata();
		},
		methods:{
			getdata(){
				menuapi.Query(this.query).then(res=>{
					this.tableData=res.data.data;
					this.total = res.data.total
					this.loading = false;
				})
				
			},
			handleCurrentChange(pageIndex){
				this.query.PageIndex = pageIndex
					this.getdata()
			},
			
			CX(){
				menuapi.Query({MenuName:this.inputCD,PageIndex:1,PageSize:10}).then(res=>{
					this.tableData=res.data.data;
					this.loading = false;
				})
				
			},
			Update(id){
				this.id=id;
				this.UpdateVisible=true;
			},
             Delete(id){
				 menuapi.Delete(id).then(res=>{
					 this.$message("删除成功")
					 this.getdata();
				 })
				 
			 },
			CloseAdd(){
				this.AddVisible=false;
				this.getdata();
			},
			CloseUpd(){
				this.UpdateVisible=false;
				this.getdata();
			}
		}
		
	  }
</script>

<style>
</style>